<template>
  <div class="flex-con gap8">
    <el-form
      class="dialog-form"
      label-suffix="："
      ref="form"
      :model="areaObj"
      :rules="rules"
      label-width="0"
      :style="{ '--form-item-width': `${100 / (5 - withOutSelect.length)}%` }"
    >
      <!-- 省份 -->
      <el-form-item label="" prop="provinceCode" v-if="!withOutSelect.includes('province')">
        <el-select v-model.trim="areaObj.provinceCode" placeholder="请选择省" clearable @change="selectProvince" size="small">
          <el-option v-for="province in provinceOptions" :key="province.regionCode" :label="province.regionName" :value="province.regionCode" />
        </el-select>
      </el-form-item>
      <!-- 城市 -->
      <el-form-item label="" prop="cityCode" v-if="!withOutSelect.includes('city')">
        <el-select
          v-model.trim="areaObj.cityCode"
          placeholder="请选择城市"
          clearable
          @change="selectCity"
          @visible-change="val => selectVisibleChange(val, withOutSelect.includes('province') ? true : areaObj.provinceCode, '省')"
          size="small"
        >
          <el-option v-for="city in cityOptions" :key="city.regionCode" :label="city.regionName" :value="city.regionCode" />
        </el-select>
      </el-form-item>
      <!-- 区县 -->
      <el-form-item label="" prop="countyCode" v-if="!withOutSelect.includes('county')">
        <el-select
          v-model.trim="areaObj.countyCode"
          placeholder="请选择区县"
          clearable
          @change="selectArea"
          @visible-change="val => selectVisibleChange(val, withOutSelect.includes('city') ? true : areaObj.cityCode, '城市')"
          size="small"
        >
          <el-option v-for="area in countyOptions" :key="area.regionCode" :label="area.regionName" :value="area.regionCode" />
        </el-select>
      </el-form-item>
      <!-- 街道 -->
      <el-form-item label="" prop="streetCode" v-if="!withOutSelect.includes('street')">
        <el-select
          v-model.trim="areaObj.streetCode"
          placeholder="请选择街道"
          @change="selectStreet"
          @visible-change="val => selectVisibleChange(val, withOutSelect.includes('county') ? true : areaObj.countyCode, '区县')"
          clearable
          size="small"
        >
          <el-option v-for="street in streetOptions" :key="street.streetCode" :label="street.streetName" :value="street.streetCode" />
        </el-select>
      </el-form-item>
      <!-- 社区 -->
      <el-form-item label="" label-width="0px" prop="communityCode" v-if="!withOutSelect.includes('community')">
        <el-select
          v-model.trim="areaObj.communityCode"
          placeholder="请选择社区"
          @change="selectCommunity"
          @visible-change="val => selectVisibleChange(val, withOutSelect.includes('street') ? true : areaObj.streetCode, '街道')"
          clearable
          size="small"
        >
          <el-option v-for="community in communityOptions" :key="community.communityCode" :label="community.communityName" :value="community.communityCode" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  listProvince,
  listCity,
  listArea,
  listStreet,
  listCommunity,
} from '@/api/system/area'
import { mapGetters } from 'vuex'
export default {
  props: {
    // 不包含的下拉 ['province', 'city','county','street','community']
    withOutSelect: {
      type: Array,
      default: () => [],
    },
    // 是否所有字段必填
    isAllRequired: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      provinceOptions: [], // 省份下拉
      cityOptions: [], // 城市下拉
      countyOptions: [], // 区县下拉
      streetOptions: [], // 街道下拉
      communityOptions: [], // 社区下拉
      areaObj: {
        // provinceCode: null,
        // cityCode: null,
        // countyCode: null,
        // streetCode: null,
        // communityCode: null,
      },
      isSelect: false, // 是否是主动下拉修改数据 -- 用于编辑页面触发watch函数请求数据
      // 表单校验
      rules: {
        provinceCode: [
          {
            required: this.isAllRequired,
            message: '省不能为空',
            trigger: 'change',
          },
        ],
        cityCode: [
          {
            required: this.isAllRequired,
            message: '市区不能为空',
            trigger: 'change',
          },
        ],
        countyCode: [
          {
            required: this.isAllRequired,
            message: '区县不能为空',
            trigger: 'change',
          },
        ],
        streetCode: [
          {
            required: this.isAllRequired,
            message: '街道不能为空',
            trigger: 'change',
          },
        ],
        communityCode: [
          {
            required: this.isAllRequired,
            message: '社区不能为空',
            trigger: 'change',
          },
        ],
      },
    }
  },
  computed: {
    ...mapGetters(['serviceAreas']),
  },
  watch: {
    // areaObj: {
    //   handler(val) {
    //     if (!this.isSelect) {
    //       val.provinceCode &&
    //         this.getCityOptions('cityOptions', val.provinceCode)
    //       val.cityCode && this.getCityOptions('countyOptions', val.cityCode)
    //       val.countyCode && this.getCityOptions('streetOptions', val.countyCode)
    //       val.streetCode &&
    //         this.getCityOptions('communityOptions', val.streetCode)
    //     }
    //   },
    //   deep: true,
    // },
  },
  created() {
    if (!this.withOutSelect.includes('province')) {
      this.getCityOptions('provinceOptions', '') // 获取省份
    } else {
      // const provinceCode = this.serviceAreas.length
      //   ? this.serviceAreas[0].areaCode
      //   : '320000'
      const provinceCode = this.serviceAreas.length
        ? localStorage.getItem('projectProvinceCode')
        : '320000'
      // this.getCityOption
      this.getCityOptions('cityOptions', provinceCode) // 获取城市/区县
    }
  },
  methods: {
    // 获取区域下拉数据
    getCityOptions(type, code) {
      const params = { code }
      switch (type) {
        case 'provinceOptions':
          listProvince().then(res => {
            if (res.code === 200) {
              this[type] = res.data
            }
          })
          break
        case 'cityOptions':
          listCity(params).then(res => {
            if (res.code === 200) {
              this[type] = res.data
            }
          })
          break
        case 'countyOptions':
          listArea(params).then(res => {
            if (res.code === 200) {
              this[type] = res.data
            }
          })
          break
        case 'streetOptions':
          listStreet(params).then(res => {
            if (res.code === 200) {
              this[type] = res.data
            }
          })
          break
        case 'communityOptions':
          listCommunity(params).then(res => {
            if (res.code === 200) {
              this[type] = res.data
            }
          })
          break
        default:
          break
      }
    },
    // 选择省份
    selectProvince(code) {
      // 清空城市、区县、街道、社区
      this.areaObj.cityCode = null
      this.areaObj.countyCode = null
      this.areaObj.streetCode = null
      this.areaObj.communityCode = null
      this.areaObj = { ...this.areaObj }
      this.cityOptions = []
      this.countyOptions = []
      this.streetOptions = []
      this.communityOptions = []
      //根据城市，查询区县
      if (code) {
        this.getCityOptions('cityOptions', code)
      }
      this.$emit('areaChange', this.areaObj)
    },
    // 选择城市
    selectCity(code) {
      // 清空区县、街道、社区
      this.areaObj.countyCode = null
      this.areaObj.streetCode = null
      this.areaObj.communityCode = null
      this.countyOptions = []
      this.streetOptions = []
      this.communityOptions = []
      //根据城市，查询区县
      if (code) {
        this.getCityOptions('countyOptions', code)
      }
      this.$emit('areaChange', this.areaObj)
    },
    // 选择区县
    selectArea(code) {
      // 清空街道、社区
      this.areaObj.streetCode = null
      this.areaObj.communityCode = null
      this.streetOptions = []
      this.communityOptions = []
      //根据区县，查询街道
      if (code) {
        this.getCityOptions('streetOptions', code)
      }
      this.$emit('areaChange', this.areaObj)
    },
    // 选择街道
    selectStreet(code) {
      // 清空社区
      this.areaObj.communityCode = null
      this.communityOptions = []
      //根据街道，查询社区
      if (code) {
        this.getCityOptions('communityOptions', code)
      }
      this.$emit('areaChange', this.areaObj)
    },
    selectCommunity() {
      this.$forceUpdate()
      this.$emit('areaChange', this.areaObj)
    },
    // 区域下拉框弹出触发
    selectVisibleChange(val, codeName, label) {
      if (val && !codeName) {
        this.msgWarning(`请先选择${label}`)
      }
    },
    submitForm() {
      let validate = false
      this.$refs['form'].validate(valid => {
        validate = valid
      })
      return validate
    },
    changeArea(val) {
      this.areaObj = val
      val.provinceCode && this.getCityOptions('cityOptions', val.provinceCode)
      val.cityCode && this.getCityOptions('countyOptions', val.cityCode)
      val.countyCode && this.getCityOptions('streetOptions', val.countyCode)
      val.streetCode && this.getCityOptions('communityOptions', val.streetCode)
    },
    // 表单重置
    reset() {
      this.areaObj = {
        provinceCode: null,
        cityCode: null,
        countyCode: null,
        streetCode: null,
        communityCode: null,
      }

      if (this.withOutSelect.includes('province')) {
        this.countyOptions = []
        this.streetOptions = []
        this.communityOptions = []
      }
      if (this.withOutSelect.includes('city')) {
        this.streetOptions = []
        this.communityOptions = []
      }
      if (this.withOutSelect.includes('street')) {
        this.communityOptions = []
      }
      if (this.withOutSelect == []) {
        this.cityOptions = []
        this.countyOptions = []
        this.streetOptions = []
        this.communityOptions = []
      }
      this.resetForm('form')
    },
  },
}
</script>

<style lang="scss" scoped>
.flex-con {
  justify-content: space-between;
}
.dialog-form {
  margin-right: -20px;
  width: calc(100% + 20px);
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
